import Header from '@/components/header';
<script>
import { routes } from '@/router.js';
import { isMobile } from '@/utils/uaagent';

export default {
  props: {
    headNav: {
      type: Array,
      default: () => {
        return [];
      },
    },
    codeShow: Boolean,
  },
  data() {
    return {
      routes,
      isMobile: isMobile(),
      isNavShow: false,
    };
  },
  computed: {
    headerNavCls() {
      if (this.isNavShow) return 'dzq-layout__header is-shown';
      return 'dzq-layout__header';
    },
    navAStyle() {
      if (this.codeShow) return { width: '68px' };
      return {};
    },
  },
  methods: {
    navCls(item) {
      const curPath = this.$route.name;
      if (item.name === curPath) return 'dzq-nav__list-item dzq-nav__list-item--actived';
      return 'dzq-nav__list-item';
    },
    handleClick(e) {
      if (this.isNavShow) this.$eventbus.emit('discuz-m-nav-click', e);
    },
    handleOver(e) {
      if (!this.isNavShow) this.$eventbus.emit('discuz-nav-click', e);
    },
    handleLeave() {
      this.$eventbus.emit('discuz-nav-leave');
    },
    handleNavShow() {
      this.$eventbus.emit('discuz-nav-leave');
      this.isNavShow = !this.isNavShow;
    },
    navHidden() {
      this.$eventbus.emit('discuz-nav-leave');
      this.isNavShow = false;
    },
  },
};
</script>

<template>
  <header :class="headerNavCls">
    <div class="dzq-nav">
      <div class="dzq-layout__box">
        <div class="dzq-nav__aciton">
          <div class="dzq-nav__aciton--left">
            <div class="dzq-nav__logo">
              <a href="/" title="Discuz! Q 首页">Discuz! Q</a>
            </div>
            <div class="dzq-menu" @click="handleNavShow">
              <i></i>
            </div>
          </div>
          <div class="dzq-nav__aciton--right">
            <ul class="dzq-nav__list">
              <li
                v-for="(item, index) in routes"
                :key="index"
                :class="navCls(item)"
                @click="navHidden"
              >
                <router-link :to="item.path" :style="navAStyle">{{ item.alias }}</router-link>
              </li>
              <li class="dzq-nav__list-item">
                <a :target="isMobile ? '' : '_blank'" href="https://discuz.chat" :style="navAStyle">
                  论坛
                </a>
              </li>
              <li
                v-for="(item, index) in headNav"
                :key="`${index}-key`"
                class="dzq-nav__list-item"
                @click="navHidden"
              >
                <a :href="item.url" :style="navAStyle">{{ item.text }}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
